import React, { Component } from 'react';
import cass from 'classnames';
import s from './index.module.less';
import CloseBar from '../../../components/CloseBar';
import SideProjectInfo from './sideProjectInfo';
import SideTaskInfo from './sideTaskInfo';
import IF from '../../../components/If';

class SideContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            activeChange: props.activeChange
        }
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.activeChange !== nextProps.activeChange) {
            this.setState({ activeChange: nextProps.activeChange })
        }
    }

    onSideBtnClick = () => {
        const { commonState, sideOpen } = this.props;
        commonState.setStateValue('sideOpen', !sideOpen);
    }

    onActiveChange = (change) => {
        if (!change) { // 根据条件刷新项目详情
            this.props.commonState.refreshProjectDetail();
        }
        this.setState({
            activeChange: change,
            isFromProjectTaskItemClick: change // 该参数主要是用来给SideTaskInfo判断用那个detailData数据
        })
    }

    onContextMenu = () => {
        const { extentNode, baseOffset, extentOffset } = window.getSelection();
        const nodeText = extentNode.data;
        if (!nodeText) return;
        const selText = nodeText.substring(baseOffset, extentOffset); // 没选中默认全部内容
        const textValue = selText.replace(/[\r\n]/g, '');
        if (!textValue) return;
        // 该事件的订阅放在/src/pages/dashboard/index.js文件，避免多次订阅
        const { ipcRenderer } = window.electron;
        ipcRenderer.send('show-right-click-menu', { show: ['copy'] });
    }

    render() {
        // type 1: 在聊天页面侧边栏；2: 显现在项目页面侧边栏；3: 显现在任务页面侧边栏
        const { showContent, sideOpen, type } = this.props;
        const { isFromProjectTaskItemClick, activeChange } = this.state;
        return (
            <div
                className={cass(s.container, {
                    [s.openStyle]: sideOpen,
                    [s.closeStyle]: !sideOpen
                })}
            >
                <IF condition={showContent}>
                    <span
                        title={sideOpen ? '关闭侧边栏' : '展开侧边栏'}
                        className={cass({
                            'mdi mdi-chevron-left': !sideOpen,
                            'mdi mdi-chevron-right': sideOpen
                        }, s.sideBtn)}
                        onClick={this.onSideBtnClick}
                    />
                </IF>
                <IF condition={showContent}>
                    <div
                        className={cass(s.animateContent, {
                            [s.taskActive]: activeChange
                        })}
                        onContextMenu={this.onContextMenu}
                    >
                        <CloseBar />
                        <div className={s.wrapProjectInfo}>
                            <SideProjectInfo
                                type={type}
                                onActiveChange={this.onActiveChange}
                            />
                        </div>
                        <div className={s.wrapTaskInfo}>
                            {type === 2 || (type === 1 && !isFromProjectTaskItemClick) ? null : (
                                <span
                                    title={'返回项目'}
                                    className={cass('mdi mdi-chevron-left', s.close)}
                                    onClick={() => this.onActiveChange(false)}
                                />
                            )}
                            <SideTaskInfo
                                type={type}
                                isFromProjectTaskItemClick={isFromProjectTaskItemClick}
                            />
                        </div>
                    </div>
                </IF>
            </div>
        );
    }
}

export default SideContainer